<template>
    <div class="service_add">
        <ul class="set_service">
            <li>
                <span class="title f24">服务类型</span>
                <p @click="openType(true)">{{typeId.name}}</p>
            </li>
            <li>
                <span class="title f24">服务项目</span>
                <p @click="openTime(true)" ref="two">{{serviceN}}</p>
            </li>
            <li>
                <span class="title f24">服务金额</span>
                <p>{{servicePrice ? servicePrice : 0}} (元)</p>
            </li>
        </ul>
        <div class="time_mask" v-if="isMask">
            <div class="time_ele">
                <p class="caozuo">
                    <span @click="openTime(false)">取消</span>
                    <span @click="openTime(false)">确定</span>
                </p>
                <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
            </div>
        </div>
        <div class="time_mask" v-if="isSerN">
            <div class="time_ele">
                <p class="caozuo">
                    <span @click="openType(false)">取消</span>
                    <span @click="openType(false)">确定</span>
                </p>
                <mt-picker :slots="slots1" @change="onServiceType"></mt-picker>
            </div>
        </div>
        <div class="btn">
            <button @click="masterServiceAdd()">保存</button>
            <span class="prompt"><i class="icon iconfont icon-tishi"></i>价格为平台标准服务价格,如有特殊要求请联系客服</span>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue';
    import { Picker } from 'mint-ui';
    import { types } from 'util';
    Vue.use(Picker);
    export default {
        name: 'setService',
        components: {
            Picker
        },
        data() {
            return {
                slots:[
                    {
                        flex: 1,
                        values: [],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                slots1: [
                    {
                        flex: 1,
                        values: ['线上咨询', '线下服务', '闪问闪答'],
                        className: 'serviceType',
                        textAlign: 'center'
                    }
                ],
                isMask: false,
                isSerN: false,
                serviceN: '请选择服务项目',
                servicePrice: '服务金额',
                serviceId: '',
                serviceList: [],
                typeId: {
                    name: '请选择服务类型',
                    id: '',
                },
            }
        },
        created(){
            this.masterServiceList()
        },
        methods: {
            onValuesChange(picker, values) {
                this.serviceN = values[0];
                this.serviceList.map((item, key) => {
                    if(values[0] == item.serviceName){
                        this.servicePrice = item.price
                        this.serviceId = item.serviceId
                    }
                })
            },
            onServiceType(picker, values) {
                if(values[0] == '线上咨询'){
                    this.typeId = {name: values[0], id: '1,2,3,4'}
                    this.$refs.two.style.pointerEvents = 'auto'
                } else if(values[0] == '线下服务') {
                    this.typeId = {name: values[0], id: '5'}
                    this.$refs.two.style.pointerEvents = 'auto'
                } else if (values[0] == '闪问闪答') {
                    this.serviceN = '闪问闪答'
                    this.servicePrice = '根据问题定价'
                    this.$refs.two.style.pointerEvents = 'none'
                    this.typeId = {name: values[0], id: '6'}
                    return;
                }
                this.slots[0].values = []
                this.serviceList.map((item, key) => {
                    if(this.typeId.id.split(',').indexOf(item.serviceType) != -1){
                        this.slots[0].values.push(item.serviceName)
                    }
                })
                this.serviceN = this.slots[0].values[0]
                this.onValuesChange('div', [this.slots[0].values[0]])
            },
            openTime(bool) {
                this.isMask = bool
            },
            openType(bool) {
                this.isSerN = bool
            },
            masterServiceList() {
                let params = {
                    masterId: this.$store.state.masterId
                }
                this.$http.fetchGet('masterServiceList', params).then(res => {
                    if(res.code == 200) {
                        this.serviceList = res.data.meiyou
                    } else {

                    }
                }, err => {
                    console.log(err)
                })
            },
            masterServiceAdd() {
                if(this.serviceId != '') {
                    if(this.serviceN != '请选择服务项目') {
                        if(this.servicePrice != '请选择服务金额') {
                            let params = {
                                masterId: this.$store.state.masterId,
                                serviceId: this.serviceId,
                                serviceName: this.serviceN,
                                price: this.servicePrice ? this.servicePrice : 0
                            }
                            console.log(params)
                            this.$http.fetchGet('masterServiceAdd', params).then(res => {
                                if(res.code == 200) {
                                    this.$vux.toast.text('添加成功')
                                    this.$router.push({
                                        path: '/myService'
                                    })
                                } else {
                                    this.$vux.toast.text(res.msg)
                                }
                            }, err => {
                                console.log(err)
                            })
                        } else {
                            this.$vux.toast.text('请输入服务金额')
                        }
                    } else {
                        this.$vux.toast.text('请选择服务项目')
                    }
                } else {
                    this.$vux.toast.text('请选择服务类型')
                }
            }
        },
        mounted() {
            
        }
    }
</script>

<style lang="less" scoped>
    .service_add{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .set_service{
            li{
                display: flex;
                .pl(20);
                .pr(20);
                .lh(88);
                box-sizing: border-box;
                border-bottom: 1px solid #f2f2f2;
                background: #fff;
                span{
                    .w(120);
                }
                p{
                    flex: 1;
                    color: #999;
                }
                input{
                    flex: 1;
                    border: 0;
                    color: #999;
                    outline:none;
                }
            }
        }
        .prompt{
            display: block;
            text-align: center;
            color: #999;
            .lh(88);
            .pr(20);
            i.icon{
                .mr(10);
            }
        }
        .btn{
            width: 100%;
            .h(88);
            .padd(0, 20);
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            button{
                width: 100%;
                .h(88);
                border: none;
                background: #189BEB;
                color: #fff;
                border-radius: 5px;
            }
            .prompt{
                display: block;
                text-align: center;
                color: #999;
                .lh(88);
                .pr(20);
                i.icon{
                    .mr(10);
                }
            }
        }
        .time_mask{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            z-index: 99;
            .time_ele{
                position: absolute;
                bottom: 0;
                left: 0;
                background: #fff;
                width: 100%;
                .caozuo{
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        &:nth-child(1){
                            border-right: 1px solid #f2f2f2;
                        }
                    }
                }
            }
        }
    }
    
</style>
